<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useSupplierGetInfo } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
import { ElCard } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

const { back } = useRouter()

const { params } = useRoute()

const id = computed(() => params?.id)

const { data, isLoading } = useSupplierGetInfo(id)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        label: 'ID',
        prop: 'id',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '企业LOGO',
        prop: 'logo',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '公司名称',
        prop: 'name',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '组织机构代码',
        prop: 'orgNo',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '注册地址',
        prop: 'address',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '社会信用代码',
        prop: 'creditCode',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '法定代表人',
        prop: 'operName',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '成立日期',
        prop: 'startDate',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '营业期限',
        prop: 'startDate',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '注册资本',
        prop: 'registCapi',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '状态',
        prop: 'orgStatus',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        label: '经营范围',
        prop: 'scope',
        valueType: 'text',
    },
]
</script>

<template>
    <ElSkeleton v-if="isLoading"
                :rows="5"
    />

    <ElCard v-else
            shadow="never"
    >
        <SearchForm v-model="data"
                    :columns="columns"
                    submit-text="查询"
                    :has-footer="false"
        >
            <template #plus-field-logo>
                <el-image v-if="data.logo"
                          style="width: 100px; height: 100px"
                          :src="data.logo"
                          fit="cover"
                          :preview-src-list="[data.logo]"
                />
            </template>
        </SearchForm>

        <div class="flex justify-center">
            <ElButton @click="back">
                返回
            </ElButton>
        </div>
    </ElCard>
</template>
